<template>
  <div class="category-selector">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-select v-model="selectedMainCategory" placeholder="请选择主分类" clearable @change="handleMainCategoryChange" style="width: 100%">
          <el-option
            v-for="category in mainCategories"
            :key="category"
            :label="category"
            :value="category">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="12">
        <el-select v-model="selectedSubCategories" multiple placeholder="请选择子分类" clearable style="width: 100%">
          <el-option
            v-for="subCategory in subCategories"
            :key="subCategory"
            :label="subCategory"
            :value="subCategory">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'CategorySelector',
  data() {
    return {
      categoryData: {
        '电影': ['爱情', '悬疑', '警匪', '科幻', '谍战', '古装', '动作', '战争', '家庭', '武侠', '历史', '神话', '恐怖', '纪实', '原创', '乡村', '预告片', '剧情', '喜剧', '青春', '校园', '传记', '宫廷', '军旅', '犯罪', '励志', '文艺', '魔幻', '动画', '花絮', '歌舞', '伦理', '奇幻', '灾难', '西部', '集锦'],
        '电视剧': ['爱情', '悬疑', '警匪', '科幻', '谍战', '古装', '动作', '战争', '家庭', '武侠', '历史', '神话', '恐怖', '纪实', '原创', '乡村', '预告片', '剧情', '喜剧', '青春', '校园', '传记', '宫廷', '军旅', '犯罪', '励志', '文艺', '动画', '花絮', '伦理', '奇幻', '集锦', '商战', '网剧', '偶像', '情景剧'],
        '综艺': ['脱口秀', '真人秀', '选秀', '访谈', '歌舞', '晚会', '益智', '搞笑', '情感', '纪实', '文化', '竞技', '美食', '旅游', '娱乐'],
        '资讯': ['军事', '社会', '时政', '国内', '民生', '国际', '法治', '港澳台', '体育', '公益', '评论', '经济', '科技', '历史', '文化'],
        '财经': ['农业', '宏观', '外汇', '保险', '科技', '公司', '股票', '证券', '访谈', '理财', '评论', '金融', '房地产', '收藏', '消费', '人物', '公益'],
        '少儿': ['动漫', '亲子', '儿歌', '儿童剧', '公益', '冒险', '晚会', '励志', '科幻', '搞笑', '早教', '童话', '益智', '手工', '美术', '玩具', '校园', '活动', '竞技', '故事', '识字', '诗词', '科普', '趣味'],
        '教育': ['小学', '中学', '大学', '公开课', '创业', '历史', '文化', '国学', '法律', '语言', '学前教育', '科普', '兴趣爱好', '职场', '职业教育', '管理', '学历', '艺术', '技能', '短视频'],
        '体育': ['综合赛事', '足球', '篮球', '排球', '网球', '台球', '羽毛球', '乒乓球', '田径', '举重', '体操', '棋牌', '武术', '赛车', '自行车', '击剑', '拳击', '搏击', '极限运动', '花样游泳', '游泳', '滑冰', '滑雪', '跳水', '高尔夫', '健身', '休闲运动', '手游', '电竞'],
        '动漫': ['战斗', '玄幻', '武侠', '竞技', '治愈', '几战', '青春', '校园', '恋爱', '亲子', '冒险', '推理', '励志', '魔幻', '神话', '热血', '益智', '科幻', '童话', '集锦', '搞笑'],
        '纪录片': ['人文', '军事', '动物', '历史', '地理', '探索', '社会', '科学', '纪实', '自然', '传记', '科技', '刑侦', '美食', '旅游', '政治', '艺术'],
        '生活': ['健康', '情感', '旅游', '母婴', '时尚', '美食', '养生', '百科', '家居', '科学', '心理', '健身', '宠物', '汽车', '舞蹈'],
        '曲艺': ['京剧', '选段', '评剧', '豫剧', '越剧', '黄梅戏', '晚会', '小品', '相声', '昆曲', '川剧', '晋剧', '沪剧', '河北梆子', '淮剧', '粤剧', '快板', '鼓曲', '说唱大书', '评书', '大鼓', '弹词'],
        '音乐': ['现场', '专辑', 'MV', '演唱会', '晚会', '影视原声', '栏目', '榜单', '音乐会'],
        '购物': ['数码', '服饰', '收藏', '珠宝', '食品', '健康', '生活', '居家'],
        '汽车': ['试驾评测', '行业评论', '资讯', '导购', '赛事', '旅游', '文化', '访谈', '情景剧', '用车养车', '趣味评车', '车展', '极客', '改装', '全景看车', '行车安全', '车市行情']
      },
      selectedMainCategory: '',
      selectedSubCategories: [],
      subCategories: []
    }
  },
  computed: {
    mainCategories() {
      return Object.keys(this.categoryData)
    }
  },
  methods: {
    handleMainCategoryChange(value) {
      this.selectedSubCategories = []
      this.subCategories = value ? this.categoryData[value] : []
    }
  }
}
</script>

<style scoped>
.category-selector {
  padding: 20px;
}
</style>